<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- layui样式 -->
    <link rel="stylesheet" href="../../component/layui/css/layui.css">
    <title>Document</title>
    <style>
        /* #code {
            width: calc(100% - 200px);
            float: left;
            margin-right: 8px;
        } */
        .layui-form-item .layui-input-inline {
            float: left;
            width: 250px;
            margin-right: 10px;
        }

        .layui-input{
            font-size: 12px;
        }

        .layui-col-space15 {
            margin: 0px;
        }
    </style>
</head>

<body style="background-color: #ffffff">
    <form class="layui-form" action="">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" pad15="">
                        <div class="layui-form" lay-filter="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" lay-verify="required" lay-vertype="tips"
                                        class="layui-input" placeholder="请输入用户名">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">当前密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="oldPassword" lay-verify="required" lay-vertype="tips"
                                        class="layui-input" placeholder="请输入当前密码">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" lay-verify="required|pass" lay-vertype="tips"
                                        autocomplete="off" id="LAY_password" class="layui-input"
                                        placeholder="必须包含英文大小写字母、数字及特殊字符">
                                </div>
                                <div class="layui-form-mid layui-word-aux">8位及以上</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="repassword" lay-verify="required" lay-vertype="tips"
                                        autocomplete="off" class="layui-input" placeholder="请再次输入新密码">
                                </div>
                            </div>

                            <div class="layui-form-item" style="margin-bottom: 0;text-align: center;">
                                <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit=""
                                    lay-filter="setmypass">确认修改</button>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- layui JS -->
    <script src="../../component/layui/layui.js"></script>
    <script src="../../js/base64.min.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>

        layui.use(['form', 'jquery', 'layer', 'Api', 'request'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                request = layui.request,
                Api = layui.Api;

            // var userInfoData = layui.data('userInfo').item

            var params = {
                name: null,
                username: null,
                oldPassword: null,
                password: null,
                role: null,
                departmentCode: null
            }

            //自定义验证规则
            form.verify({
                pass: [
                    /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,}/
                    , '您的密码复杂度过低（长度必须>=8位，且包含大小写字母、数字及特殊字符），请修改密码！'
                ],
            });

            //提交
            form.on('submit(setmypass)', function (data) {
                if (data.field.password != data.field.repassword) {
                    parent.layer.msg('新密码两次输入不一致', { icon: 2 });
                    return false;
                }
                if (data.field.password == data.field.oldPassword) {
                    parent.layer.msg('新密码不能和旧密码重复', { icon: 2 });
                    return false;
                }

                params.username = data.field.username
                params.oldPassword = Base64.encode(data.field.oldPassword)
                params.password = Base64.encode(data.field.password)

                layer.confirm('确定修改？', { icon: 3, title: '修改密码' }, function (index1) {
                    var success = function (res) {
                        // console.log("res:", res)
                        if (res.errno == 0) {
                            // 设置全局存储
                            layer.alert('修改成功！', { icon: 6 }, function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭 
                            })
                        } else {
                            layer.alert(res.errmsg, { icon: 2 });
                        }
                    }
                    request.post(Api.userUpdate, params, success)
                    layer.close(index1);
                });

            })
            return false;
        });
    </script>

</body>

</html>